<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="handleDialog"
    :before-close="closeDialog"
    :close-on-click-modal="false"
    width="500px"
  >
    <el-form
      :model="customForm"
      :rules="rules"
      ref="customForm"
    >
      <el-form-item
        label="选择品类："
        label-width="140px"
        prop="category_id"
      >
        <el-cascader
          v-if="handleDialog"
          v-model="customForm.category_id"
          :options="cateList"
          :props="selectProps"
          :show-all-levels="false"
          @change="changeCascader"
        ></el-cascader>
      </el-form-item>
      <el-form-item
        label="字段排序："
        label-width="140px"
        prop="field_order"
      >
        <el-input
          v-model="customForm.field_order"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="字段描述："
        label-width="140px"
        prop="field_title"
      >
        <el-input
          v-model="customForm.field_title"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="字段类型："
        label-width="140px"
        prop="field_type"
      >
        <el-select
          v-model="customForm.field_type"
          placeholder="请选择"
        >
          <el-option
            label="文本框"
            :value="1"
          ></el-option>
          <el-option
            label="单选"
            :value="2"
          ></el-option>
          <el-option
            label="多选"
            :value="3"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="字段值："
        label-width="140px"
        prop="field_val"
      >
        <el-tag
          :key="tag"
          v-for="tag in tagsList"
          closable
          :disable-transitions="false"
          @close="closeTag(tag)"
        >
          {{ tag }}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="tagInputConfirm"
          @blur="tagInputConfirm"
        >
        </el-input>
        <el-button
          v-else
          class="button-new-tag"
          size="small"
          @click="showInput"
        >+添加字段值</el-button>
      </el-form-item>
      <el-form-item
        label="必填项："
        label-width="140px"
        prop="must_is"
      >
        <el-radio-group v-model="customForm.must_is">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="closeDialog">取 消</el-button>
      <el-button
        type="primary"
        @click="submitForm('customForm')"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import cropUpload from "@/components/cropUpload";
export default {
  components: { cropUpload },
  props: {
    dialogTitle: {
      type: String,
    },
    isInputVisible: {
      type: Boolean,
      default: false,
    },
    handleDialog: {
      type: Boolean,
      default: false,
    },
    customForm: {
      type: Object,
      default: () => ({}),
    },
    tagsList: {
      type: Array,
      default: () => [],
    },
    cateList: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    inputVisible: {
      get() {
        return this.isInputVisible
      },
      set(newVal) { }
    }
  },
  data() {
    var checkNum = (rule, value, callback) => {
      const reg = /^[0-9]\d*$/
      if (!value) {
        callback(new Error("请输入数字"))
      } else if (!reg.test(value)) {
        callback(new Error("请输入正整数"))
      } else {
        callback()
      }
    }
    return {
      inputValue: '',
      rules: {
        category_id: [
          { required: true, message: "请选择品类", trigger: "change" },
        ],
        field_order: [
          { required: true, message: "请输入数字", trigger: "blur" },
          { validator: checkNum, trigger: 'blur' }
        ],
        field_title: [
          { required: true, message: "请输入字段描述", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
        field_type: [
          { required: true, message: "请选择字段类型", trigger: "change" },
        ],
        field_val: [
          { required: false, message: "请输入字段值", trigger: "change" },
        ],
        must_is: [
          { required: true, message: "请选择必填项", trigger: "change" },
        ],
      },
      selectProps: {
        label: 'name',
        value: 'id'
      }
    };
  },
  methods: {
    closeDialog(param) {
      this.$emit("closeDialog", param);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit("submitForm", true);
        } else {
          return false;
        }
      });
    },
    closeTag(tag) {
      this.$emit("closeTag", tag);
    },
    changeCascader(val) {
      if (val) {
        this.$emit("changeCascader", val[1]);
      }
    },
    showInput(val) {
      this.$emit("showInput", val)
    },
    tagInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        if (this.tagsList.indexOf(inputValue) > -1) {
          this.$message.warning('不能重复添加')
        } else {
          this.tagsList.push(inputValue);
        }
      }
      this.inputVisible = false;
      this.inputValue = "";
      this.$emit('tagInputConfirm', this.tagsList)
    },
  },
};
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
  color: #999;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>